<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>子组件的props选项接收来自父组件的数据</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 父组件把message值传递给子组件 -->
      <child-component :content="message"></child-component>
    </div>
    <script type="text/javascript">
      var childComponent = Vue.extend({
        template: "<div>{{ content }}</div>",
        // 使用props接收父组件传递过来的数据
        props: {
          content: {
            type: String,
            default: "这是子组件的数据",
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        data: {
          message: "这是父组件传来的数据",
        },
        components: {
          childComponent,
        },
      });
    </script>
  </body>
</html>
